<template>
    <div>
      <view class='top'>
        <image src="/static/images/back.png" mode='aspectFit' class="back"></image>
        <text>购物车</text>
        <image src="/static/images/dotted.png" mode='aspectFit' class="dotted"></image>
      </view>
      <!-- top end -->

      <view class="conbox">
        <view v-if="isCon == true">
          <view class="list" v-for="(item,index) of cartList" :key="index">
            <view class="left" @click="checked(index)">
              <input type="checkbox" :checked='item.ischecked'>
            </view>
            <view class="right">
              <view class="r-top">
                <view class="imgbox">
                  <image :src="item.image" mode='aspectFit' class="back"></image>
                </view>
                <view class="t-con">
                  <view class="title">{{item.name}}</view>
                  <view class="del" @click="del(index)" >
                    <text v-if="item.ischecked">删除</text>
                  </view>
                  <view class="boxtwo">
                      <view class="pricebox">
                      <text>￥</text><text class="new">{{item.price}}</text>
                      <text class="old">￥{{item.old_price}}</text>
                      </view>
                        <view class="numbox">
                        <text class="btn" @click="countDown(index)">-</text>
                        <text class="num">{{item.count}}</text>
                        <text class="btn" @click="countUp(index)">+</text>
                      </view>
                  </view>
                </view>
              </view>
              <view class="r-bom">
                <view>
                  <text class="will">加价购</text>
                  <text class="buy">购买一件即可享受换购优惠</text>
                </view>
                <text class="choose">去选择></text>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="nullCart">您的购物车是空的</view>
      </view>
      <!-- conbox end -->

      <view class="bottom" v-if="isCon">
        <view class="f-left">
          <input type="checkbox" :checked='isCheckedAll' @click="checkedAll">
          <text class="all">全选</text>
          <text>合计：</text>
          <text class="sum">￥<text class='sumTotal'>{{total.sum}}</text></text>
        </view>
        <view class="f-right">
          结算 (<text>{{total.num}}</text>)
        </view>
      </view>
      <!-- bottom end -->
    </div>
</template>
<script>
export default {
  data(){
      return{
        cartList: [],
        isCon: true,
        isCheckedAll: false
      }
  },
  computed:{
    // 总价 和 结算数量
    total:function(){
      let totalp = 0;
      let seletedNum = 0;
      this.cartList.forEach((item,index)=>{
        if(item.ischecked){
          totalp += item.count * item.price;
        }
      })
      return {sum:totalp.toFixed(2),num:seletedNum};
    }
  },
  methods:{
    // 数量加
    countUp(index){
      this.cartList[index].count++;
      wx.setStorageSync('cartlist',this.cartList);
    },
    // 数量减
    countDown(index){
      if(this.cartList[index].count > 1){
        this.cartList[index].count--;
      }
      wx.setStorageSync('cartlist',this.cartList);
    },
    // 删除
    del(index){
      this.cartList.splice(index,1);
      wx.setStorageSync('cartlist',this.cartList);
      if(this.cartList.length == 0){
        this.isCheckedAll = false;
        this.isCon = false;
      }
    },
    // 全选
    checkedAll(){
      if(this.cartList.length == 0){
        this.isCheckedAll = false;
      } else{
        this.isCheckedAll = !this.isCheckedAll;
        this.cartList.forEach(item=>{
          item.ischecked = this.isCheckedAll;
        })
      }
    },
    // 单选
    checked(index){
      this.cartList[index].ischecked = !this.cartList[index].ischecked;
      let result = this.cartList.every(item=>{
        return item.ischecked == true
      })
      if(result){
        this.isCheckedAll = result;
      } else{
        this.isCheckedAll = result;
      }
    }
  },
  onShow(){
    // 从缓存获取商品信息
    let arr = wx.getStorageSync('cartlist');
    // 判断购物车是否为空
    if(arr.length == 0){
      this.isCon = false;
    } else{
      this.isCon = true;
      this.cartList = arr;
      this.checkedAll()
    }
  }
}
</script>
<style scoped>
div{
  background: #ccc;
}
.sum{
  color: red;
}
.sumTotal{
  font-size: 18px;
}
.top{
  width: 750rpx;
  height: 86rpx;
  background: #fff;
  border-bottom: 1px solid #ccc;
  line-height: 86rpx;
  display: flex;
  justify-content: space-between;
}
.top .back{
  width: 38rpx;
  height: 38rpx;
  margin-left: 20rpx;
  margin-top: 28rpx;
}
.top .dotted{
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
  margin-top: 25rpx;
}
/* top end */

.conbox{
  width: 750rpx;
  background: #ccc;
  padding-bottom: 130rpx;
}
.conbox .nullCart{
  text-align: center;
  line-height: 300rpx;
}
.conbox .list{
  width: 710rpx;
  height: 330rpx;
  border-radius: 20rpx;
  background: #fff;
  margin: 0 auto;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
}
.del{
  width: 430rpx;
  height: 96rpx;
  text-align: right;
  margin-left: 15rpx;
}
.del text{
  padding: 6rpx 20rpx 6rpx 20rpx;
  background: #ff0000;
  margin-right: 40rpx;
  border-radius: 6rpx;
  color: white;
}
.conbox .list .left{
  width: 45rpx;
  height: 100%;
  box-sizing: border-box;
  padding-top: 100rpx;
  margin-left: 10rpx;
}
.conbox .list .right{
  width: 620rpx;
  height: 100%;
  margin-right: 25rpx;
}
.conbox .list .right .r-top .imgbox{
  width: 180rpx;
  height: 250rpx;
  overflow: hidden;
}
.conbox .list .right .r-top .imgbox image{
  width: 180rpx;
  height: 250rpx;
}
.conbox .list .right .r-top .t-con{
  width: 430rpx;
  height: 250rpx;
}
.boxtwo{
  display: flex;
  justify-content: space-between;
}
.numbox .btn{
  display: inline-block;
  width: 42rpx;
  height: 42rpx;
  border-radius: 50%;
  background: #ccc;
  text-align: center;
  line-height: 38rpx;
}
.numbox .num{
  margin-left: 15rpx;
  margin-right: 15rpx;
}
.conbox .list .right .r-top .t-con .title{
  font-size: 18px;
  margin-left: 15rpx;
  margin-top: 30rpx;
}
.conbox .list .right .pricebox{
  box-sizing: border-box;
  padding-left: 15rpx;
}
.conbox .list .right .pricebox text{
  font-size: 14px;
  color: red;
}
.conbox .list .right .pricebox .new{
  font-size: 18px;
  color: red;
}
.conbox .list .right .pricebox .old{
  font-size: 14px;
  color: #666;
  margin-left: 10rpx;
  text-decoration: line-through;
}
.conbox .list .right .r-bom,.r-top{
  display: flex;
  justify-content: space-between;
}
.conbox .list .right .r-bom .will{
  border: 1px solid #d9304f;
  font-size: 14px;
  color: #d9304f;
  border-radius: 6rpx;
  margin-right: 8rpx;
}
.conbox .list .right .r-bom .buy{
  color: #999;
}
/* conbox end */

.bottom{
  width: 750rpx;
  height: 107rpx;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}
.bottom .f-left{
  display: flex;
  justify-content: space-between;
  line-height: 107rpx;
}
.bottom .f-left input{
  margin-right: 20rpx;
  margin-left: 32rpx;
}
.bottom .f-left .all{
  margin-right: 20rpx;
}
.bottom .f-right{
  width: 186rpx;
  height: 70rpx;
  background: red;
  border-radius: 35rpx;
  text-align: center;
  color: white;
  line-height: 70rpx;
  font-size: 18px;
  margin-right: 20rpx;
  margin-top: 15rpx;
}
</style>